@border-color: #ddd;
@border: solid 1px @border-color;
@selected-border: solid 1px #875;
@control-background: #eee;
@shadow: 0 0 1.5px 1.5px #eee;
@content-border: solid 1px #bbb;
@control-text-color: #999;
@active-color: #f8f8f8;
@resize-border-color: #999;

.position-absolute(@top: 0, @right: @top, @bottom: @top, @left: @right) {
    position: absolute;
    top: @top;
    right: @right;
    bottom: @bottom;
    left: @left;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
}

button {
    border: @border;
    box-shadow: @shadow;
    background: none;
    padding: 0;
    color: @control-text-color;

    &:active {
        background: @active-color;
        border: @border;
        outline: none;
    }
}

.document-controls {
    .position-absolute(0, 85%, 0, 0);
    background: @control-background;
    box-shadow: @shadow;
    border-right: @border;
}

.layout-selector() {
    .itemLayout() {
        width: 100%;
        height: 10%;
        margin-bottom: 30%;
    }

    padding: 3% 3% 0;

    .layout {
        border: @content-border;
        box-shadow: @shadow;
        position: relative;
        overflow: hidden;
        cursor: move;

        &.selected {
            border: @selected-border;
        }

        .block {
            font-size: 10%;
            position: absolute;
            transform-origin: 0 0;
            transform: scale(0.333, 0.333);
            opacity: 0.45;
        }
    }

    * {
        width: 100%;
        height: 10%;
        margin-bottom: 30%;
    }
}

.page-selector {
    .layout-selector;

    .position-absolute(0, 0, 0, 85%);
    box-shadow: @shadow;
    border-left: @border;
    overflow-x: hidden;
    overflow-y: auto;

}

.template-selector {
    .layout-selector;

    height: 72%;
    overflow-x: hidden;
    overflow-y: auto;
}

.hidden() {
    display: none;
}

.hidden {
    .hidden;
}

.layout-editor {
    .position-absolute(0, 15%);

    &.hidden > * {
        .hidden;
    }

    .editor-area {
        .position-absolute(3%, 3%, 12%);
        border: @border;
        box-shadow: @shadow;
    }

    .layout-controls {
        .position-absolute(90%, 3%, 3%);
        text-align: right;

        button {
            padding: 1%;
        }
    }

    .block {
        border: dashed 1.5px @resize-border-color;
        cursor: grab;
        font-size: 100%;
        position: absolute;

        &.grabbing {
            cursor: grabbing;
        }
    }
}
